<template>
	<div id="rechargemanage" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>设置</el-breadcrumb-item>
						<el-breadcrumb-item>充值账户管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
		</div>

		<div class="rechargemanagewrap">
			<div class="displayflex">
				<h4 class="four">授权额度状态</h4>
				<span class="Quota">总额度:{{userinfo.credit_total|filterNumber}}元</span>
				<el-divider direction="vertical"></el-divider>
				<span class="Quota" style="margin-left: 0;">剩余额度:{{userinfo.credit_balance|filterNumber}}元</span>
			</div>
			<div class="displayflex">
				<p class="balance" style="padding-top: 0;">账户充值余额:<span
						class="price">{{userinfo.account_recharge_balance}}</span>元</p>
				<!-- <button @click="recharge()">充值</button> -->
				<el-button size="small" type="primary" @click="recharge()">充 值</el-button>
			</div>
			<!-- <h4 class="four">消费记录</h4> -->

			<div style="width: 60%;">
				<el-divider content-position="left"><i class="el-icon-wallet"></i> 消费记录</el-divider>
				<el-table class="common-table" v-loading="loading"   header-cell-class-name="common-table-header-cell" :data="capital" stripe>
					<el-table-column header-align="center" width="70" align="center" label="序号">
						<template slot-scope="scope">
							{{scope.$index+1+(page-1)*pageSize}}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="create_time" label="消费时间">
					</el-table-column>
					<el-table-column  align="center" prop="name" label="消费类型">
						<template slot-scope="scope">
							<span v-if="scope.row.pay_type==1">微信</span>
							<span v-if="scope.row.pay_type==2">积分</span>
							<span v-if="scope.row.pay_type==3">支付宝</span>
							<span v-if="scope.row.pay_type==4">水卡</span>
							<span v-if="scope.row.pay_type==5">其他</span>
						</template>
					</el-table-column>
					<el-table-column  align="center" prop="address" label="金额">
						<template slot-scope="scope">
							<span v-if="scope.row.type==1" style="color:#FF6565">{{scope.row.money |filterNumber}}</span>
							<span v-if="scope.row.type==2" style="color:#1bd61b;">{{scope.row.money |filterNumber}}</span>
						</template>
					</el-table-column>
					<el-table-column  align="center" show-overflow-tooltip prop="note" label="描述">
					</el-table-column>

					<template slot="empty" v-if="isLoad">
						<div class="new-no-data-show">
							<img src="../../assets/images/no-data.png" alt="">
							<div>暂无相关数据</div>
						</div>
					</template>
				</el-table>
				<div class="same-page-inShow" v-if="capital.length>0 && isLoad">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="sizes" :page-size="pageSize"
						layout="total, prev, pager, next, jumper,sizes" :total="total">
					</el-pagination>
				</div>
				<!-- <table border="0" cellspacing="0"  v-loading="loading" element-loading-text="拼命加载中">
					<tr>
						<th><span>消费时间</span></th>
						<th><span>消费类型</span></th>
						<th><span>金额</span></th>
						<th><span>描述</span></th>
					</tr>
					<tr v-for="v in capital">
						<td>{{v.create_time}}</td>
						<td v-if="v.pay_type==1">微信</td>
						<td v-if="v.pay_type==2">积分</td>
						<td v-if="v.pay_type==3">支付宝</td>
						<td v-if="v.pay_type==4">水卡</td>
						<td v-if="v.pay_type==5">其他</td>
						<td v-if="v.type==1" style="color:#FF6565">-{{v.money|filterNumber}}</td>
						<td v-if="v.type==2" style="color:#1bd61b;">+{{v.money|filterNumber}}</td>
						<td>{{v.note}}</td>
					</tr>
				</table>
				<div class="new-no-data-show" v-if="capital.length<=0 && isLoad">
					<img src="../../assets/images/no-data.png" alt="">
					<div>暂无相关数据</div>
				</div>
				<div class="same-page-inShow" v-if="capital.length>0 && isLoad">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="sizes" :page-size="pageSize"
						layout="total, prev, pager, next, jumper,sizes" :total="total">
					</el-pagination>
				</div> -->
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		name: 'setup',
		data: function () {
			return {
				userinfo: [],
				capital: [],
				currentPage: 1,//当前页数
				page: 1,
				pageSize: 15,
				sizes: [15, 30, 40, 50],
				total: 0,
				isLoad: false,
				loading: false, //加载动画
			}
		},
		inject: ["reload"],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload();
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			recharge: function () {
				this.$router.push({
					path: '/recharge'
				})
			}, //每页
			handleSizeChange(val) {

				var that = this;
				that.pageSize = parseInt(`${val}`);
				that.getRecord();
			},
			//分页
			handleCurrentChange(val) {

				var that = this;
				that.page = parseInt(`${val}`);
				that.getRecord();
			},
			//获取合伙人信息
			getPartner() {
				var that = this;
				that.$post({
					url: 'Partner/Setup/get_partner',
					data: {

					},
					success: function (data) {
						that.userinfo = data.data;
					}

				})
			},
			//获取合伙人资金记录信息
			getRecord() {
				var that = this;
				that.isLoad = false;
				that.loading = true; //开启动画
				that.$post({
					url: 'Partner/Users/get_record',
					data: {
						page: that.page,
						pageSize: that.pageSize,
					},
					success: function (data) {
						if (data.code == 1000) {
							that.capital = data.data.list;
							that.total = Number(data.data.count);
						}
						that.isLoad = true;
						that.loading = false; //关闭动画
					}

				})
			},
		},
		mounted() {

		},
		watch: {

		},
		created() {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			this.getPartner();
			this.getRecord();
		}
	}
</script>

<style>
	#rechargemanage .rechargemanagewrap .displayflex {
		display: flex;
		align-items: center;
	}

	#rechargemanage .rechargemanagewrap {
		padding: 0 40px 30px 40px;
	}

	#rechargemanage .rechargemanagewrap .Quota {
		color: #807e7d;
		margin-left: 30px;
	}

	#rechargemanage .rechargemanagewrap .balance .price {
		font-size: 22px;
		color: #b82025;
		font-weight: bold;
		padding: 0 5px;
	}

	#rechargemanage .rechargemanagewrap .displayflex button {

		margin-left: 35px;
	}

	.paginShow {
		margin-top: 40px;
		display: flex;
		justify-content: flex-end;
	}
</style>